<template>
    <fieldset>
        <legend>混入组件</legend>
        <h1>一些内容</h1>
        <button @click="handleClick">点击</button>
        <button @click="handleClick2">点击2</button>
        <h1>{{ msg }}</h1>
        <h1>{{ msg2 }}</h1>
    </fieldset>
</template>
<script>
//混入可以将组件可以进行分发,可以定义到一个独立的对象中,一个可混入的对象包含了组件所有的选项

//总结混入的特点:
//1.混入对象和组件同名钩子函数,会合并成一个数组,并且依次执行,优先执行混入对象的钩子函数

//2.同名的选项也会合并,如果遇到属性冲突了,那么以组件的属性为主

//缺点:代码可读性差
import mixCom from "../../mixins/mixCom"
export default {
    mixins: [mixCom],
    data() {
        return {
            msg: "只因你太美"
        }
    },
    methods: {
        handleClick() {
            console.log('组件的点击事件')
        }
    },
    mounted() {
        console.log('组件的this', this)
        console.log('组件的Mounted钩子函数')
    }
}
</script>